<template>
  <el-link :underline="false" class="edu-like" @click="handieLike">
    <i
      class="edu-icon-dianzan_active edu-icon--left"
      :class="[current_like == 1 ? 'active' : '']"
    ></i>
    <span class="count">{{ current_count }}</span>
  </el-link>
</template>
<script>
export default {
  props: {
    like: {
      type: Number,
      default: 0
    },
    count: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      current_like: this.like,
      current_count: this.count
    }
  },
  watch: {
    like: function(val) {
      this.current_like = val
    },
    count: function(val) {
      this.current_count = val
    }
  },
  methods: {
    handieLike() {
      if (this.current_like == 1) {
        this.current_like = 0
        this.current_count -= 1
        this.$message.warning('取消点赞')
      } else {
        this.current_like = 1
        this.current_count += 1
        this.$message.success('点赞成功')
      }
      this.$emit('like', this.current_like)
    }
  }
}
</script>

<style lang="scss">
.edu-like {
  .edu-icon-dianzan_active {
    font-size: 16px;
    font-weight: 400;
    color: $text-color-auxiliary;
    &.active {
      @include edu-color-auxiliary;
    }
  }
  .count {
    font-size: 12px;
    font-weight: 400;
    color: $text-color-auxiliary;
  }
}
</style>
